<!doctype html>
<html>
<!--
Copyright The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>goog.ui.Prompt</title>
  <script src="../base.js"></script>
  <script>
    goog.require('goog.ui.Prompt');
  </script>
  <link rel="stylesheet" href="css/demo.css">
  <style>
  .modal-dialog-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #FFF;
  }

  .modal-dialog {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    background-color: #AAF;
    border: 2px solid #99c0ff;
  }

  .modal-dialog-title {
    position:relative;
    background: #C3D9FF;
    padding: 4px;
    font: bold 11px verdana;
    cursor: default;
  }

  .modal-dialog-content {
    background: #E8EEF7;
    padding: 12px 18px 12px 18px;  font: normal 12px verdana;
    font: normal 12px verdana;
  }

  .modal-dialog-userInput {
    font: normal 12px verdana;
    width: 90%;
  }

  .modal-dialog-buttons {
    background: #E8EEF7;
    padding: 4px;
    font: normal 12px verdana;
    text-align: right;
  }

  .modal-dialog-buttons button {
    margin: 5px;
  }
  </style>
</head>

<body>
  <h1>goog.ui.Prompt</h1>

  <p>The default text is selected when the prompt displays</p>

  <p>You can use 'Enter' or 'Esc' to click 'Ok' or 'Cancel' respectively</p>

  <p>
  <a href="#" onclick="prompt.setDefaultValue('Pink');prompt.setVisible(true);">
    Prompt
  </a>
  </p>
  <script>
    var promptHandler = function(response) {
      if (response == null) {
        alert('Afraid to answer?');
      } else {
        alert('I like ' + response + ' too!');
      }
    }

    var prompt = new goog.ui.Prompt(
        'Information Required',
        'What is your favorite color?',
        promptHandler);
  </script>
</body>
</html>
